<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened}">
    <div class="default-header">
        <div class="row">
            <h1 class="col">QEMU VM configuration</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="qemuTemplate">
        <mat-accordion>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        General settings
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <form [formGroup]="generalSettingsForm">
                    <mat-form-field class="form-field">
                        <input matInput type="text" formControlName="templateName" [(ngModel)]="qemuTemplate.name" placeholder="Template name">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input matInput type="text" formControlName="defaultName" [(ngModel)]="qemuTemplate.default_name_format" placeholder="Default name format">
                    </mat-form-field>
                    <mat-form-field class="form-field">
                        <input matInput type="text" formControlName="symbol" [(ngModel)]="qemuTemplate.symbol" placeholder="Symbol">
                    </mat-form-field>
                </form>
                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
                <mat-form-field class="form-field">
                    <mat-select placeholder="Category" [(ngModel)]="qemuTemplate.category">
                        <mat-option *ngFor="let category of categories" [value]="category[1]">
                            {{category[0]}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input matInput type="number" [(ngModel)]="qemuTemplate.ram" placeholder="RAM">
                    <span matSuffix>MB</span>
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input matInput type="number" [(ngModel)]="qemuTemplate.cpus" placeholder="vCPUs">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <mat-select placeholder="Qemu binary" [(ngModel)]="qemuTemplate.qemu_path">
                        <mat-option *ngFor="let binary of binaries" [value]="binary.path">
                            {{binary.path}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="form-field">
                    <mat-select placeholder="Boot priority" [(ngModel)]="qemuTemplate.boot_priority">
                        <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
                            {{priority[0]}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="form-field">
                    <mat-select placeholder="On close" [(ngModel)]="qemuTemplate.on_close">
                        <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
                            {{option[0]}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-form-field class="select">
                    <mat-select placeholder="Console type" [(ngModel)]="qemuTemplate.console_type">
                        <mat-option *ngFor="let type of consoleTypes" [value]="type">
                            {{type}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-checkbox [(ngModel)]="qemuTemplate.console_auto_start">
                    Auto start console
                </mat-checkbox>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        HDD
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        HDA (Primary Master)
                    </mat-card-subtitle>
                    <mat-card-content>
                        <mat-form-field class="form-field">
                            <input matInput [(ngModel)]="qemuTemplate.hda_disk_image" placeholder="Disk image">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hda_disk_interface">
                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                                {{interface}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    </mat-card-content>
                </mat-card>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        HDB (Primary Slave)
                    </mat-card-subtitle>
                    <mat-card-content>
                        <mat-form-field class="form-field">
                            <input matInput [(ngModel)]="qemuTemplate.hdb_disk_image" placeholder="Disk image">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdb_disk_interface">
                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                                {{interface}}
                            </mat-option>
                        </mat-select>
                        </mat-form-field>
                    </mat-card-content>
                </mat-card>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        HDC (Secondary Master)
                    </mat-card-subtitle>
                    <mat-card-content>
                        <mat-form-field class="form-field">
                            <input matInput [(ngModel)]="qemuTemplate.hdc_disk_image" placeholder="Disk image">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdc_disk_interface">
                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                                {{interface}}
                            </mat-option>
                        </mat-select>
                        </mat-form-field>
                    </mat-card-content>
                </mat-card>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        HDD (Secondary Slave)
                    </mat-card-subtitle>
                    <mat-card-content>
                        <mat-form-field class="form-field">
                            <input matInput [(ngModel)]="qemuTemplate.hdd_disk_image" placeholder="Disk image">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                        <mat-select placeholder="Disk interface" [(ngModel)]="qemuTemplate.hdd_disk_interface">
                            <mat-option *ngFor="let interface of diskInterfaces" [value]="interface">
                                {{interface}}
                            </mat-option>
                        </mat-select>
                        </mat-form-field>
                    </mat-card-content>
                </mat-card>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        CD/DVD
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div>
                    <button mat-raised-button color="primary" (click)="filecdrom.click()" class="file-button">Browse</button>
                    <input
                        type="file"
                        #filecdrom
                        class="nonvisible"
                        (change)="uploadCdromImageFile($event)"/>
                    <mat-form-field class="file-name-form-field">
                        <input
                            matInput
                            type="text"
                            [(ngModel)]="qemuTemplate.cdrom_image"
                            placeholder="Image"/>
                    </mat-form-field>
                </div>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Network
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-form-field class="form-field">
                    <input matInput type="number" [(ngModel)]="qemuTemplate.adapters" placeholder="Adapters">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input matInput type="text" [(ngModel)]="qemuTemplate.first_port_name" placeholder="First port name">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input matInput type="text" [(ngModel)]="qemuTemplate.port_name_format" placeholder="Name format">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input matInput type="number" [(ngModel)]="qemuTemplate.port_segment_size" placeholder="Segment size">
                </mat-form-field>
                <mat-form-field class="form-field">
                    <input matInput type="text" [(ngModel)]="qemuTemplate.mac_address" placeholder="Base MAC">
                </mat-form-field>
                <mat-form-field class="form-field">
                <mat-select placeholder="Type" [(ngModel)]="qemuTemplate.adapter_type">
                    <mat-option *ngFor="let type of networkTypes" [value]="type[0]">
                        {{type[1]}} ({{type[0]}})
                    </mat-option>
                </mat-select>
                </mat-form-field>
                <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
                <mat-checkbox [(ngModel)]="qemuTemplate.legacy_networking">
                    Use the legacy networking mode
                </mat-checkbox>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Advanced
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        Linux boot specific settings
                    </mat-card-subtitle>
                    <mat-card-content>
                        <div>
                            <button mat-raised-button color="primary" (click)="fileinitrd.click()" class="file-button">Browse</button>
                            <input
                                type="file"
                                #fileinitrd
                                class="nonvisible"
                                (change)="uploadInitrdFile($event)"/>
                            <mat-form-field class="file-name-form-field">
                                <input
                                    matInput
                                    type="text"
                                    [(ngModel)]="qemuTemplate.initrd"
                                    placeholder="Initial RAM disk (initrd)"/>
                            </mat-form-field>
                        </div>
                        <div>
                            <button mat-raised-button color="primary" (click)="filekerenelimage.click()" class="file-button">Browse</button>
                            <input
                                type="file"
                                #filekernelimage
                                class="nonvisible"
                                (change)="uploadKernelImageFile($event)"/>
                            <mat-form-field class="file-name-form-field">
                                <input
                                    matInput
                                    type="text"
                                    [(ngModel)]="qemuTemplate.kernel_image"
                                    placeholder="Kernel image"/>
                            </mat-form-field>
                        </div>
                        <mat-form-field class="form-field">
                            <input matInput type="text" [(ngModel)]="qemuTemplate.kernel_command_line" placeholder="Kernel command line">
                        </mat-form-field>
                    </mat-card-content>
                </mat-card>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        Bios
                    </mat-card-subtitle>
                    <mat-card-content>
                        <div>
                            <button mat-raised-button color="primary" (click)="filebios.click()" class="file-button">Browse</button>
                            <input
                                type="file"
                                #filebios
                                class="nonvisible"
                                (change)="uploadBiosFile($event)"/>
                            <mat-form-field class="file-name-form-field">
                                <input
                                    matInput
                                    type="text"
                                    [(ngModel)]="qemuTemplate.bios_image"
                                    placeholder="Bios image"/>
                            </mat-form-field>
                        </div>
                    </mat-card-content>
                </mat-card>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        Optimization
                    </mat-card-subtitle>
                    <mat-card-content>
                        <mat-checkbox [(ngModel)]="activateCpuThrottling">
                            Activate CPU throttling
                        </mat-checkbox>
                        <mat-form-field *ngIf="activateCpuThrottling" class="form-field">
                            <input matInput type="number" [(ngModel)]="qemuTemplate.cpu_throttling" placeholder="Perecentage of CPU allowed">
                        </mat-form-field>
                        <mat-form-field class="form-field">
                        <mat-select placeholder="Process priority" [(ngModel)]="qemuTemplate.process_priority">
                            <mat-option *ngFor="let priority of priorities" [value]="priority">
                                {{priority}}
                            </mat-option>
                        </mat-select>
                        </mat-form-field>
                    </mat-card-content>
                </mat-card>
                <mat-card>
                    <mat-card-title></mat-card-title>
                    <mat-card-subtitle>
                        Additional settings
                    </mat-card-subtitle>
                    <mat-card-content>
                        <mat-form-field class="form-field">
                            <input matInput type="text" [(ngModel)]="qemuTemplate.options" placeholder="Options">
                        </mat-form-field>
                        <mat-checkbox [(ngModel)]="qemuTemplate.linked_clone">
                            Use as a linked base VM
                        </mat-checkbox>
                    </mat-card-content>
                </mat-card>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Usage
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-form-field class="form-field">
                    <textarea matInput type="text" [(ngModel)]="qemuTemplate.usage"></textarea>
                </mat-form-field>
            </mat-expansion-panel>
        </mat-accordion>
        <div class="buttons-bar">
            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
        </div>
    </div>
</div>
<app-custom-adapters 
    [hidden]="!(isConfiguratorOpened && qemuTemplate)" 
    #customAdaptersConfigurator
    [networkTypes]="networkTypes" 
    [displayedColumns]="displayedColumns"
    (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
    (saveConfigurationEmitter)="saveCustomAdapters($event)"
></app-custom-adapters>
<app-symbols-menu 
    *ngIf="isSymbolSelectionOpened && qemuTemplate" 
    [server]="server" 
    [symbol]="qemuTemplate.symbol" 
    (symbolChangedEmitter)="symbolChanged($event)"
></app-symbols-menu>
